﻿<MCard MaxWidth="300" Class="mx-auto">
    <MList Dense>
        <MSubheader>REPORTS</MSubheader>
        <MListItemGroup @bind-Value="selectedItem"
                        Color="primary">
            @foreach (var item in items)
            {
                <MBorder Value="@(selectedItem == item.Text)" Offset="offset" Size="4">
                    <MListItem Value="@item.Text">
                        <MListItemIcon>
                            <MIcon>@item.Icon</MIcon>
                        </MListItemIcon>
                        <MListItemContent>
                            <MListItemTitle>@item.Text</MListItemTitle>
                        </MListItemContent>
                    </MListItem>
                </MBorder>
            }
        </MListItemGroup>
    </MList>
    <MSwitch @bind-Value="offset" Label="Offset"></MSwitch>
</MCard>

@code{
    readonly Item[] items = new[]
    {
        new Item { Text = "Real-Time", Icon = "mdi-clock" },
        new Item { Text = "Audience", Icon = "mdi-account" },
        new Item { Text = "Conversions", Icon = "mdi-flag" }
    };
    
    bool offset;
    StringNumber selectedItem = "Audience";

    class Item
    {
        public string Text { get; set; }
        public string Icon { get; set; }
    }
}